<template>
	<view>
		<u-navbar back-text="返回" :back-text-style="{ color: 'white' }" back-icon-color="white" :is-back="true"
			title="编辑文章" title-color="white" :background="background">
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
			<view>
				<p class="header"><span class="symbol">*</span>文章标题：</p>
				<input type="text" placeholder="请输入文章标题..."
					style="font-size: 20px; border-bottom: 1px solid #DDDDDD;margin: 4vw;">
			</view>
			<view class="cover">
				<view class="coverBox">
					<p class="wordy"><span class="symbol">*</span>文章封面(必选):</p>
					<u-upload :action="action" :max-size="1 * 1024 * 1024" max-count="1" class="print"></u-upload>
				</view>
			</view>
			<view class="classify">
				<p class="header"><span class="symbol">*</span>文章分类</p>
				<view class="select">
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
					<view class="btn">
						<u-button @click="show = true" >{{classify}}</u-button>
					</view>
				</view>
			</view>
			<view class="details">
				<p class="header"><span class="symbol">*</span>文章内容</p>
				<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jinEdit> 
			</view>
		</view>
	</view>
</template>

<script>
	import jinEdit from '../../components/jin-edit/jin-edit.vue';
	export default {
		data() {
			return {
				action: 'https://eggblog.bluej.cn/api/imgUpload',
				classify:"请选择分类...",
				background: {
					backgroundColor: '#FFCC22',
				},
				show: false,
				list: [{
						value: '1',
						label: 'html'
					},
					{
						value: '2',
						label: 'css'
					},
					{
						value: '3',
						label: 'js'
					}
				],
				flag:true
			};
		},
		components: {
		jinEdit
		},
		onLoad(){
			uni.hideTabBar();
		},
		methods: {
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
			confirm(e) {
				this.classify=e[0].label;
				console.log(e);
			},
			// 点击发布
			editOk(res) {
			    console.log(res);
			}
		},
		// onBackPress(e) {
		// 			if (this.flag) {
		// 				uni.showModal({
		// 					title: "确定退出编辑？",
		// 					content: "退出后内容不做保存",
		// 					success: (res) => {
		// 						if (res.confirm) {
		// 							// console.log("确定返回");
		// 							this.flag = false
		// 							//关闭所有页面，打开到应用内的某个页面。
		// 							console.log(123);
		// 							uni.navigateBack({
		// 								delta:1
		// 							});
		// 							return true
		// 						} else {
		// 							this.flag = true
		// 							// console.log("取消");
		// 							return true
		// 						}
		// 					}
		// 				})
		// 				return true
		// 			} 
		// 			else {
		// 				return false
		// 			}
		// 	},
			beforeRouteLeave(to, from, next) {  
			// 当用户离开当前页面时，弹出提示框
			// console.log(to,"to", from,"from", next,"next",);
			    uni.showModal({
			      title: '提示',
			      content: '确定要离开当前页面吗？离开后内容不会被保存',
			      success:  (res)=> {
			        if (res.confirm) {
			          // 用户点击确定，离开当前页面
			   //       this.$Router.push({
						//  path:"/pages/index/index"
					 // })
					 console.log(2312312321);
					 // uni.navigateTo({
					 // 	url:"/pages/index/index"
					 // })
					 next("/")
			        } else if (res.cancel) {
			          // 用户点击取消，留在当前页面
			          next(false)
			        }
			      }
			    })
			  },
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-top: 2vw;
		margin-left: 2vw;
	}

	.symbol {
		color: red;
	}

	.cover {
		margin: 4vw;
		border-bottom: 1px solid #DDDDDD;
	}

	.print {
		margin-bottom: 1vw;
	}

	.wordy {
		margin-left: -2vw;
		margin-top: -2vw;
		margin-bottom: 1vw;
	}
	.select{
		margin-left: 2vw;
		margin-top: 2vw;
		padding-right: 3vw;
	}
	.btn{
		button::after{ border: none;}
		border-bottom: 1px solid #DDDDDD;
	}
	::v-deep .tool{
		position: fixed;
		bottom: 0%;
	}
</style>
